<script setup lang="ts">
import hljs from "highlight.js";
import Button from "../lib/Button.vue";
import "highlight.js/styles/arduino-light.css";
import { ref, computed, onMounted, nextTick } from "vue";

const props = defineProps({
  components: Object,
});

const sourceCode = (components: any) => {
  return hljs.highlight(components.__sourceCode, { language: "html" }).value;
};

const codeVisible = ref(false);

const show = ref(false);
const enter = () => {
  show.value = true;
};
const leave = () => {
  show.value = false;
};

const height = ref<number>(0);
const computedHeight = ref<number>(0);

const showCode = computed(() => {
  if (height.value === 0) {
    return false;
  } else {
    return true;
  }
});


const codePer = ref(null)
onMounted(() => {
  nextTick(() => {
    const codePer2 = codePer.value
    let { height } = codePer2.getBoundingClientRect()
    computedHeight.value = height
  })
})

const toggle = () => {
  if (height.value === 0) {
    height.value = computedHeight.value
  } else {
    height.value = 0
  }
}
</script>

<template>
  <div class="demo" @mouseenter="enter" @mouseleave="leave">
    <h2>{{ components.__sourceCodeTitle }}</h2>
    <div class="demo-component">
      <component :is="components"></component>
    </div>
    <div class="per-wrapper">
      <div class="per-content" :style="{ height: height + 'px' }">
        <div class="per-desc"></div>
        <pre ref="codePer">
          <code class="hljs" v-html="sourceCode(components)"></code>
        </pre>
      </div>
      <div class="demo-block-control" @click="toggle">
        <div class="downicon">
          <svg class="down" aria-hidden="true">
            <use :xlink:href="showCode === false ? '#icon-down' : '#icon-sort-up'"></use>
          </svg>
        </div>

        <transition name="fade">
          <span class="show-world" v-show="show"> {{
              showCode === true ? "隐藏代码" : "显示代码"
          }}</span>
        </transition>
      </div>
    </div>
    <!-- <div class="demo-actions">
            <Button @click="codeVisible = !codeVisible">查看代码</Button>
        </div>
        <div class="demo-code" v-if="codeVisible">
            <pre>
                    <code class="hljs" v-html="sourceCode(components)"></code>
                </pre>
        </div> -->
  </div>
</template>

<style scoped lang="scss">
$border-color: #d9d9d9;

.demo {
  border: 1px solid $border-color;
  margin: 16px 0 32px;

  >h2 {
    font-size: 20px;
    padding: 8px 16px;
    border-bottom: 1px solid $border-color;
  }

  &-component {
    padding: 16px;
  }

  // &-actions {
  //     padding: 8px 16px;
  // }

  // &-code {
  //     padding: 8px 16px;
  //     border-top: 1px dashed $border-color;

  //     >pre {
  //         line-height: 1.1;
  //         font-family: Consolas, 'Courier New', Courier, monospace;
  //         margin: 0;
  //         >code {
  //             background-color: rgba(188,237,208,.1);
  //         }
  //     }
  // }
  .per-wrapper {
    .per-content {
      background-color: #fafafa;
      border-top: 1px solid #eaeefb;
      overflow: hidden;
      height: 0;
      transition: height 0.2s;
    }

    .demo-block-control {
      border-top: 1px solid #eaeefb;
      height: 44px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      margin-top: -1px;
      color: #d3dce6;
      cursor: pointer;
      position: relative;
      text-align: center;
      left: 0;

      &:hover {
        color: #aca8ff;
        background-color: rgba(187, 236, 207, 0.2);
      }

      .downicon {
        display: inline-block;
        position: absolute;
        right: 53%;
      }

      .down {
        width: 20px;
        height: 44px;
        fill: currentcolor;
        transition: all 0.3s;
      }

      .show-world {
        font-size: 14px;
        line-height: 44px;
        transition: all 0.3s;
        transform: translateX(-30px);

        &.fade-enter {
          opacity: 0;
          transform: translateX(10px);
        }

        &.fade-enter-to {
          opacity: 1;
          transform: translateX(-30px);
        }

        &.fade-leave {
          opacity: 1;
          transform: translateX(-30px);
        }

        &.fade-leave-to {
          opacity: 0;
          transform: translateX(0px);
        }
      }
    }
  }
}
</style>
